<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.bracket.min.css" />
    <link rel="stylesheet" type="text/css" href="css/larsDes.css" />
    <title>Turniermaster</title>
</head>

<body>
    <div id="indexView" class="container-fluid">
        <!--Isabel-->
        <div class="col-sm-1"></div>
        <div class="col-sm-10 row">
            <div class="page-header">
                <h1>Turniermaster</h1>
            </div>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" id="navbrandTournamentName">Intro</a>
                    </div>
                    <div class="collapse navbar-collapse" id="navigation">
                        <ul class="nav navbar-nav">
                            <li id="btn_homeView"><a><span class="glyphicon glyphicon-home"></span> Home</a>
                            </li>
                            <li id="btn_createView"><a><span class="glyphicon glyphicon-pencil"></span> Turnier erstellen</a>
                            </li>
                            <li id="btn_joinView"><a><span class="glyphicon glyphicon-search"></span> Turnier-Ansicht</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div id="homeView">
                <div class="col-sm-1"></div>
                <div class="col-sm-10">
                    <p>Turniere erstellen ist schön!</p>
                </div>

            </div>

            <div id="createView">
                <div class="col-sm-1"></div>
                <div class="col-sm-9">
                    <h2>Neues Turnier erstellen:</h2>
                    <form role="form" class="form-horizontal" id="form_createTournament">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Turniername:</label>
                            <div class="col-sm-10">
                                <input type="text" name="tf_tournamentName" class="form-control" placeholder="Name" required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Passwort:</label>
                            <div class="col-sm-10">
                                <input type="password" name="tf_password" class="form-control" placeholder="Passwort" required/>
                            </div>
                        </div>
                        <div id="competitorsList">
                            <!-- Inputfelder per JS eingefügt -->
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-default" id="btn_addCompetitor">Spieler hinzufügen</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-default">Turnier erstellen</button>
                            </div>
                            <button type="reset" class="btn btn-default col-sm-8">Reset</button>
                        </div>
                    </form>
                </div>
            </div>

            <div id="joinView">
                <div class="col-sm-1"></div>
                <div id="listofTournaments" class="col-sm-9">
                    <h3>Turnier beitreten oder Administrieren</h3>
                    <form role="form" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-2">Turnier:</label>
                            <div class="col-sm-8">
                                <select id="select_tournamentList" class="form-control">
                                    <option value="-1">bitte Turnier wählen...</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-sm-8">
                            <button type="button" class="btn btn-default col-sm-2" id="joinTournament">Beitreten</button>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">Passwort:</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="password_admin_existing" />
                            </div>
                        </div>
                        <div class="form-group col-sm-8">
                            <button type="button" class="btn btn-default col-sm-2" id="adminExistingTournament">Verwalten</button>
                        </div>
                    </form>
                </div>
                <div class="col-sm-2"></div>
            </div>
        </div>
    </div>
    <div id="tournamentView" class="container-fluid">
        <div class="page-header">
            <h2>Turnier-Ansicht</h2>
        </div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#reiter">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" id="navbrandTournamentName">Turnier-Ansicht</a>
                </div>
                <div class="collapse navbar-collapse" id="reiter">
                    <ul class="nav navbar-nav">
                        <li id="reitTable" class="active"><a>Tabellensicht</a>
                        </li>
                        <li id="reitBaum"><a>Baumansicht</a>
                        </li>
                        <li id="reitPlatz"><a>Platzierungen</a>
                        </li>
                        <li id="btn_openModal" data-toggle="modal" data-target="#editModal"><a>Ergebnis eintragen</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="leaveTournament"><span class="glyphicon glyphicon-user"></span> Turnier verlassen</a>
                        </li>
                        <li><a id="quitTournament"><span class="glyphicon glyphicon-off"></span> Turnier beenden</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="row">
            <div class="col-sm-9">
                <div id="umgebung_tabelle"></div>
                <div id="umgebung_baum">
                    <h1>Baum</h1>
                    <div id="baum"></div>
                </div>
                <div id="umgebung_platzierung">
                    <table class="table" id="platzTable">
                        <caption>Platzierung</caption>
                        <thead>
                            <tr>
                                <th>Platz</th>
                                <th>Spieler</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="col-sm-3" id="changelog">
                <div class="list-group">
                    <a class="list-group-item active">Letzte Änderungen</a>
                    <a class="list-group-item"></a>
                </div>
            </div>
        </div>
    </div>
    
    <!--Bootstrap modal als PopupFenster-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">Schließen</button>
                    <h4 class="modal-title" id="editModalLabel">Ergebnis eintragen</h4>
                </div>
                <div class="modal-body">
                    <div id="editGame">
                        <select id="gamesSelection"></select>
                        <div id="msgEdit">
                            <p class="help-block">Wähle ein Spiel aus</p>
                        </div>
                        <label for="scoreP1" id="labelPlayer1">Spieler 1</label>
                        <input type="number" value="0" class="form-control" id="scoreP1" />
                        <label for="scoreP2" id="labelPlayer2">Spieler 2</label>
                        <input type="number" value="0" class="form-control" id="scoreP2" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btn_setScore">Ergebnis speichern</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="errorMessage" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">Schließen</button>
                    <h4 class="modal-title" id="myModalLabel">Fehler:</h4>
                </div>
                <div class="modal-body">
                    <a></a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.bracket.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/indexView.js"></script>
    <script type="text/javascript" src="js/client.js"></script>
</body>

</html>